<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/js/layer/mobile/need/layer.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/vue/vue.min.js"></script>
    <script type="text/javascript" src="/js/layer/layer.js"></script>
    <style type="text/css">

        .text_main {
            width: 1200px;
            height: 100%;
            margin-top: 20px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;

        }

        .left {
            float: left;
            width: 900px;
            height: 100%;
            padding: 18px;
            background-color: white;
        }

        .right {
            float: right;
            width: 300px;
            margin-left: 20px;
        }

        .notmove {
            position: fixed;
            z-index: 2008;
            top: 20px;
            width: 300px;
            height: 100%;
        }

        .assist {
            padding: 10px;
            background-color: white;
            height: 100%;
        }

        li {
            list-style: none;
        }


    </style>
</head>
<body>
<div id="aop" class="text_main">
    <div class="left">
        <h3 v-html="paper.paper_name">{{paper.paper_name}}</h3>
        <h4><span id="dura">时间 {{paper.dura}}分钟</span> 满分{{paper.full}}分 及格分数:{{paper.pass}}</h4>
        <hr/>
        <div class="paper_main">

            <div class="panel panel-info plm_only" v-show="onlyList.length != 0">
                <div class="panel-heading">
                    <h4>单选题 （共{{onlyList.length}}道题，每题{{types.only}}分）</h4>
                </div>
                <div>
                    <br>
                    <ul>
                        <li v-for="(pro,index) in onlyList">
                            <div class="dd">
                                <div :id="'plm_only_'+(index+1)" class="">
                                    <span>{{index+1}}</span>
                                    <span>{{pro.pname}}</span>
                                </div>
                                <div class="">
                                    <ul>
                                    <#--选项-->
                                        <li v-for="(value,key) in pro.pchoice" v-if="value != null">
                                            <input type="radio" :name="'plm_only_'+(index+1)"
                                                   :id="'plm_only_'+(index+1)+key" @click="getOnlyAnswer(index,key)"/>{{key}}.
                                            <label :for="'plm_only_'+(index+1)+key" v-html="value">{{value}}</label>
                                        </li>
                                    </ul>
                                </div>
                                <a style="margin-left: 70%" @click="deleonlyList(index)">删除试题</a>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="panel panel-success plm_many" v-show="manyList.length != 0">
                <div class="panel-heading">
                    <h4>多选题 （共{{manyList.length}}道题，每题选对{{types.many.a}}分，少选{{types.many.b}}分）</h4>
                </div>
                <div>
                    <br>
                    <ul>

                        <li v-for="(pro,index) in manyList">
                            <div>
                                <div :id="'plm_only_'+(index+1)" class="">
                                    <span>{{index+1}}</span>
                                    <span>{{pro.pname}}</span>
                                </div>
                                <div class="">
                                    <ul>
                                        <li v-for="(value,key) in pro.pchoice" v-if="value != null">
                                            <input type="checkbox" :name="'plm_many_'+(index+1)"
                                                   :id="'plm_many_'+(index+1)+key" :value="key"
                                                   v-model="pro.studentAnswer"/>{{key}}.
                                            <label :for="'plm_many_'+(index+1)+key" v-html="value">{{value}}</label>
                                        </li>
                                    </ul>
                                </div>
                                <a style="margin-left: 70%" @click="delemanyList(index)">删除试题</a>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="panel panel-info plm_judge" v-show="judgeList.length != 0">
                <div class="panel-heading">
                    <h4>判断题（共{{judgeList.length}}道题，每题{{types.judge}}分）</h4>
                </div>
                <div>
                    <br>
                    <ul>

                        <li v-for="(pro,index) in judgeList">
                            <div>
                                <div :id="'plm_judge_'+(index+1)" class="">
                                    <span>{{index+1}}</span>
                                    <span>{{pro.pname}}</span>
                                </div>
                                <div class="">
                                    <ul>
                                        <li v-for="(value,key) in pro.pchoice" v-if="value != null">
                                            <input type="radio" :name="'plm_judge_'+(index+1)"
                                                   :id="'plm_judge_'+(index+1)+key" @click="getJudgeAnswer(index,key)"/>{{key}}.
                                            <label :for="'plm_judge_'+(index+1)+key" v-html="value">{{value}}</label>
                                        </li>
                                    </ul>
                                </div>
                                <a style="margin-left: 70%" @click="delejudgeList(index)">删除试题</a>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="notmove">
            <div class="assist">
                <input type="button" value="添加试题" id="addProblem" class="btn btn-sm btn-outline btn-info">
                <input type="button" value="返回试卷列表" id="returnListPaper" class="btn btn-sm btn-outline btn-info" >
                <br><br>
                <h4>
                    <div>
                        试卷名称：<input type="text" :value="paper.paper_name" style="width: 150px" id="paper_name"><br><br>
                    </div>
                </h4>
                <div>
                    单选题: <input type="text" readonly="true" class="ds" :value="onlyList.length" style="width: 60px"
                                id="onlylist">道 每道：<input
                        type="text" name="fen" class="fen ds" style="width: 60px" :value="types.only" id="only">
                    分<br><br>
                    多选题: <input type="text" readonly="true" class="ds" :value="manyList.length" style="width: 60px">道
                    每道：<input
                        type="text" name="fen" class="fen ds" style="width: 60px" :value="types.many.a" id="many"> 分<br><br>
                    判断题: <input type="text" readonly="true" class="ds" :value="judgeList.length" style="width: 60px">道
                    每道：<input
                        type="text" name="fen" class="fen ds" style="width: 60px" :value="types.judge" id="judge"> 分<br><br>
                </div>
                <div>
                    时间: <input type="text" :value="paper.dura" id="sss">分钟<br><br>
                    满分: <input type="text" :value="paper.full" id="full" readonly="true"><br><br>
                    及格分数：<input type="text" :value="paper.pass" id="pass"><br><br>
                </div>

                <div>
                    <input type="button" value="保留试卷内容" id="saveBtn" class="btn btn-sm btn-outline btn-info" >
                </div>
            </div>


        </div>
    </div>
</div>
<input type="hidden" value="${paper_id}" id="paperid">
<script>

    var aop = new Vue({
        el: "#aop",
        data: {
            im: "",
            paper: {},
            onlyList: [],
            manyList: [],
            judgeList: [],
            types: {
                only: 0,
                many: {
                    a: 0,
                    b: 0
                },
                judge: 0,
            },
            result: ''
        },
        methods: {
            delejudgeList: function (aa) {
                this.judgeList.splice(aa, 1);
            },
            delemanyList: function (aa) {
                this.manyList.splice(aa, 1);
            },
            deleonlyList: function (aa) {
                this.onlyList.splice(aa, 1);
            },
            addonlyList: function (aa) {
                this.onlyList.push(aa);
            }

        },
        watch: {
            onlyList: {
                handler(val, oldVal){
                    aop.paper.full = val.length * aop.types.only + aop.manyList.length * aop.types.many.a + aop.judgeList.length * aop.types.judge;
                },
                deep: true
            },
            manyList: {
                handler(val, oldVal){
                    aop.paper.full = aop.onlyList.length * aop.types.only + val.length * aop.types.many.a + aop.judgeList.length * aop.types.judge;
                },
                deep: true
            },
            judgeList: {
                handler(val, oldVal){
                    aop.paper.full = aop.onlyList.length * aop.types.only + aop.manyList.length * aop.types.many.a + val.length * aop.types.judge;
                },
                deep: true
            },
            types: {
                handler(val, oldVal){
                    aop.paper.full = aop.onlyList.length * val.only + aop.manyList.length * val.many.a + aop.judgeList.length * val.judge;
                },
                deep: true
            },

        }


    });


</script>
<script src="/js/paper/paper_show.js"></script>

</body>
</html>